import { createApp } from 'https://unpkg.com/petite-vue?module'
import WeeklyReport from './views/WeeklyReport.js'
import DevTools from './views/DevTools.js'

// 插入到html
const container = document.createElement('div')
container.id = 'script27'
document.body.appendChild(container)

const appDowm = document.createElement('div')
appDowm.id = 'capp'
appDowm.setAttribute('v-scope', 'app()')
container.appendChild(appDowm)
// 引入css
const cssDom = document.createElement('link')
cssDom.setAttribute('href', 'https://unpkg.com/27script/index.css')
// cssDom.setAttribute('href', 'http://localhost:3000/index.css')
cssDom.setAttribute('type', 'text/css')
cssDom.setAttribute('rel', 'stylesheet')
container.appendChild(cssDom)

createApp({
  app: function () {
    return {
      get env() {
        return location.host.split('.')[0]
      },
      $template: `
        <div :class="['container', env === 'localhost:8080' ? 'localhost8080' : '']">
          <div v-if="env === 'jira'" v-scope="WeeklyReport()"></div>
          <div v-if="env === 'localhost:8080'" v-scope="DevTools()"></div>
        </div>
      `,
      WeeklyReport,
      DevTools
    }
  },
  showToast: function (message, duration = 2000) {
    // 创建toast元素
    const toast = document.createElement('div');
    toast.textContent = message;
    toast.style.cssText = `
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    z-index: 10000;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
  `;

    document.body.appendChild(toast);

    // 显示动画
    setTimeout(() => {
      toast.style.opacity = '1';
    }, 10);

    // 自动隐藏
    setTimeout(() => {
      toast.style.opacity = '0';
      setTimeout(() => {
        document.body.removeChild(toast);
      }, 300);
    }, duration);
  }
}).mount('#capp')
